<template>
  <tm-app ref="app">
    <tm-navbar title="奥集能"></tm-navbar>
    <view>
      <view class="fix-top">
        <headers title="办事" />
        <tag
          tagSize="n"
          :taglist="WorkTypeTabs"
          :tagActive="data.tagActive"
          @btnClick="changeData"
        />
      </view>
      <tm-sheet :margin="[0]" v-if="data.isLoading">
        <tm-skeleton-line :height="50"></tm-skeleton-line>
        <tm-skeleton-line :height="50"></tm-skeleton-line>
        <tm-skeleton model="chat"></tm-skeleton>
        <tm-skeleton model="chat"></tm-skeleton>
        <tm-skeleton model="chat"> </tm-skeleton>
      </tm-sheet>
      <scroll-view
        scroll-y="true"
        class="scroll-Y mt108"
        :refresher-enabled="true"
        @refresherrefresh="refresher"
        :refresher-triggered="data.triggered"
        v-else
      >
        <work-list
          :list="(data.taskList as IFile[])"
          :tagActive="data.tagActive"
          v-if="data.taskList.length > 0"
        ></work-list>
        <tm-sheet :margin="[0, 2]" v-else>
          <tm-result
            :showBtn="false"
            title="暂无数据"
            class="custom-work-result"
          ></tm-result>
        </tm-sheet>
      </scroll-view>
    </view>
  </tm-app>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { WorkTypeTabs } from './config'
import tag from '../../components/tag/index.vue'
import headers from '../../components/header/header.vue'
import OrgCtrl from '@/ts/controller'
import workList from './components/workList.vue'
import { TaskTypeName } from '@/ts/core'
import { TabItems } from '@/ts/base/model'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { TabItemsCode } from '@/ts/base/model'
import { IFile, IWorkTask } from '@/ts/core'

type DataType = {
  taskList: IFile[]
  tagActive: string
  triggered: boolean
  isLoading: boolean
}

const data = reactive<DataType>({
  taskList: [],
  tagActive: 'todo',
  triggered: false,
  isLoading: true
})

onLoad(option => {
  /** 从门户跳转进来 */
  if (option && Object.values(TabItemsCode).includes(option.code)) {
    const routerParams: TabItems = {
      code: option.code,
      label: option.label
    }
    changeData(routerParams)
  } else {
    /** 初始化 */
    const initTag = WorkTypeTabs.find(item => item.code === data.tagActive)!
    changeData(initTag)
  }
})

async function getList(taskType: TaskTypeName) {
  uni.showLoading({
    title: '数据加载中'
  })
  data.taskList = []
  let resultList: IWorkTask[] = []
  switch (taskType) {
    case '待办':
      {
        resultList = await OrgCtrl.work.loadTodos(true)
      }
      break
    case '已办':
    case '抄送':
    case '发起的':
      {
        resultList = await OrgCtrl.work.loadTasks(taskType, 0)
      }
      break

    default:
      resultList = []
      break
  }
  const newTasks = resultList.sort((a, b) => {
    return (
      new Date(b.taskdata.updateTime).getTime() -
      new Date(a.taskdata.updateTime).getTime()
    )
  })
  data.taskList = [...newTasks]
  setTimeout(() => {
    uni.hideLoading()
    data.isLoading = false
  }, 1000)
}
async function changeData(item: TabItems) {
  data.tagActive = item.code
  data.isLoading = true
  if (item.label === '常用') {
    loadCommons()
  } else {
    getList(item.label as TaskTypeName)
  }
  uni.setStorageSync('taskType', item.label)
}
function refresher() {
  if (!data.triggered) {
    data.triggered = true
    data.isLoading = true
    if (data.tagActive === 'commons') {
      loadCommons()
    } else {
      getList(uni.getStorageSync('taskType') as TaskTypeName)
    }
    setTimeout(() => {
      data.triggered = false
    }, 1000)
  }
}

/** 加载常用 */
const loadCommons = async () => {
  uni.showLoading({
    title: '数据加载中'
  })
  let resultList = await OrgCtrl.loadCommons()
  data.taskList = resultList.filter(i => i.typeName === '办事')

  setTimeout(() => {
    uni.hideLoading()
    data.isLoading = false
  }, 1000)
}

onShow(() => {
  uni.$once('changeList', () => {
    getList(uni.getStorageSync('taskType') as TaskTypeName)
  })
})
</script>
<style lang="scss">
@import '../../common/style/global.scss';
.todo-list {
  display: flex;
  align-items: center;
  position: relative;
  // justify-content: center;
}
.flex-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // width: 260px;
}
.rg-time {
  position: absolute;
  right: 25px;
}
.fix-top {
  position: fixed;
  background: #fff;
  z-index: 1;
}
.mt108 {
  margin-top: 108px;
}
.wd200 {
  width: 170px;
}
.custom-work-result {
  height: calc(100vh - 430rpx);
}
</style>
